<template>
  <a-button type="primary" @click="state.open=true"><plus-outlined/>新建待办</a-button>
  <a-modal title="创建任务"
           v-model:open="state.open"
           :width="520"
           :footer="false">

    <a-form>
      <a-form-item>
        <div class="task-create" tabindex="1">
          <a-textarea :bordered="false"
                      allowClear
                      showCount
                      :maxlength="200"
                      placeholder="准备做什么？"
                      :auto-size="{ minRows: 4, maxRows: 6 }"/>
          <div class="task-create-footer">
            <a-space>
              <a-tooltip title="截止时间">
                <span class="button"><clock-circle-outlined/></span>
              </a-tooltip>
              <a-tooltip title="执行者">
                <span class="button"><user-outlined/></span>
              </a-tooltip>
              <a-tooltip title="优先级">
                <span class="button"><flag-outlined/></span>
              </a-tooltip>
              <a-tooltip title="项目">
                <span class="button"><project-outlined/></span>
              </a-tooltip>
            </a-space>
          </div>
        </div>
      </a-form-item>
      <a-form-item class="margin-none flex-end">
        <a-space>
          <a-button>完成并创建下一个</a-button>
          <a-button type="primary">完成</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped>
  .task-create {
    background-color: #fafafa;
    padding: 6px 12px;
    border-radius: 6px;
    border:1px solid transparent;
  }
  .task-create:hover,
  .task-create:focus{
    border-color: #4096ff;
    box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
    transition: var(--transition);
  }
  .task-create-footer {
    padding: 4px 0 0;
    border-top: 1px solid #f0f0f0;
  }
  .task-create-footer .button {
    display: block;
    padding: 4px 10px;
    border-radius: 6px;
  }
  .task-create-footer .button:hover{
    background-color: #f0f0f0;
    cursor: pointer;
    transition: var(--transition);
  }
  :deep(.ant-input-textarea:after){
    padding-top: 8px;
  }
</style>

<script setup lang="ts">
import {
  PlusOutlined,
  ProjectOutlined,
  FlagOutlined,
    UserOutlined,
  ClockCircleOutlined} from "@ant-design/icons-vue";
import {reactive} from "vue";
const state = reactive({
  open: false,
  loading:false
})
</script>
